<template>
    <div class="classroom-review-details">
        <div class="edu-page-title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/classroomReview' }">教室借用审核</el-breadcrumb-item>
                <el-breadcrumb-item>教室借用审核详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card shadow="never">
            <div class="title">
                <h2 class="float-left">申请明细及审批</h2>
                <div class="float-right">
                    <el-button @click="goback">返回</el-button>
                </div>
            </div>
            <div style="padding: 0 16px;">
                <div class="title-from">
                    <span>基本信息</span>
                </div>
                <div class="details-table">
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">借用人：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">经办人：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">申请时间：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">借用人部门：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">联系方式：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">借用用途：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">借用说明：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">其他要求：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">是否使用多媒体：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">借用校区：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="center">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">出席总人数：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">教室人数：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row class="row-height" type="flex" justify="flex-start">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">使用时间：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="row-height" type="flex" justify="flex-start">
                        <el-col :span="12">
                            <div class="div-flex">
                                <div class="div-flex-left">已选教室：</div>
                                <div class="div-flex-last-right">{{}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-form label-width="80px">
                    <el-row>
                        <el-col>
                            <el-form-item label="审批类型：">
                                <span>教室借用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-form-item label="审批意见：" style="flex: 1;">
                            <el-input type="textarea" placeholder="请输入"></el-input>
                        </el-form-item>
                        <span>(限长2000个字)</span>
                    </el-row>
                </el-form>
                <div class="btnGroup" v-if="pageType === 'details'">
                    <el-button>驳回</el-button>
                    <el-button type="primary">同意</el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" v-if="pageType === 'details'">
            <h2>审批进度</h2>
            <EduTable :order="true" :pagination="false" :data="auditList.data">
                <el-table-column label="时间">
                    <template slot-scope="scope"></template>
                </el-table-column>
                <el-table-column label="审批人">
                    <template slot-scope="scope">{{scope.row}}</template>
                </el-table-column>
                <el-table-column label="角色">
                    <template slot-scope="scope">{{scope.row}}</template>
                </el-table-column>
                <el-table-column label="审批结果">
                    <template slot-scope="scope">{{scope.row}}</template>
                </el-table-column>
                <el-table-column label="审批说明">
                    <template slot-scope="scope">{{scope.row}}</template>
                </el-table-column>
            </EduTable>
        </el-card>
    </div>
</template>

<script>
import Bus from "common/src/utils/bus";
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/resource/classroom";
export default {
    name: "classroomReviewDetails",
    data() {
        return {
            auditList: {
                data: []
            },
            classroomInfo: null,
            pageType: "details" // details 详情
        };
    },
    methods: {
        // 返回审核列表页面
        goback() {
            this.$store.commit("delete_tabs", this.$route.fullPath);
            this.$router.push({
                path: "/classroomReview"
            });
        }
    },
    created() {
        Bus.$on("classroomReviewDetails", data => {
            this.classroomInfo = data;
        });
        Bus.$on("getClassroomPage", data => {
            this.pageType = data;
        });
    },
    beforeDestroy() {
        Bus.$off("classroomReviewDetails");
        Bus.$off("getClassroomPage");
    }
};
</script>

<style lang="scss" scoped>
.classroom-review-details {
    .edu-page-title {
        margin-bottom: 16px;
    }
    .title {
        
    }
    .title-from {
        margin: 40px 0 16px 0;
    }
    .details-table {
        border: 2px solid #e5e9f2;
    }
    .row-height {
        height: 50px;
        text-align: center;
        border-bottom: 1px solid #e5e9f2;
        .div-flex {
            display: flex;
            height: 100%;
            &.div-left {
                justify-content: flex-start;
            }
            .div-flex-left {
                flex: 1;
                text-align: right;
                height: 100%;
                border-right: 1px solid #e5e9f2;
                background-color: rgba(245, 247, 249, 1);
                line-height: 50px;
            }
            .div-flex-last-right {
                flex: 2;
                text-align: left;
                padding: 10px;
                line-height: 30px;
            }
        }
    }
    .btnGroup {
        text-align: right;
    }
}
</style>

